<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { showDataId } from '@/api/index'
const router = useRouter()
const list = ref([])
const isLoading = ref(false)
const showDialog = ref(false)
const active = ref('order')
const selectedItem = ref({})
const show = async () => {
    let result = await showDataId()
    if (result.code === 1) {
        // eslint-disable-next-line no-undef
        showNotify({ type: 'success', message: '接受数据成功' });
        list.value = result.data
    } else {
        // eslint-disable-next-line no-undef
        showNotify({ type: 'danger', message: '接受数据失败' });

    }
}
const Details = (item) => {
    selectedItem.value = item
    showDialog.value = true
}
const formattedAmount = () => {
    return selectedItem.value.amount / 100;
}
const onChange = () => {
    router.push({
        path: '/'
    })
}
onMounted(() => {
    show()
})
</script>

<template>
    <!-- 刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <van-notice-bar left-icon="volume-o" text="下面展示您的下单信息"></van-notice-bar>

        <div class="contain">
            <van-cell-group inset v-for="(item, index) in list.value" :key="index">
                <div class="desc">
                    <div class="left">
                        <div class="tip">乐跑id：{{ item.userId }}</div>
                        <div class="tip">公里：{{ item.km }}</div>
                        <div class="tip">次数：{{ item.times }}</div>
                    </div>
                    <div class="right">
                        <van-button round type="info" @click="Details(item)">查看详情</van-button>
                    </div>
                </div>
            </van-cell-group>
        </div>
        <!-- 弹出详细信息 -->
        <van-dialog v-model="showDialog" title="详细信息">
            <van-cell title="开始时间" :value=selectedItem.value.startDate></van-cell>
            <van-cell title="结束时间" :value=selectedItem.value.endDate></van-cell>
            <van-cell title="金额" :value=formattedAmount()></van-cell>
        </van-dialog>
        <!-- 底层标签页 -->
        <van-tabbar class="tabbar" v-model="active" @change="onChange" safe-area-inset-bottom>
            <van-tabbar-item icon="wap-home" name="index">主页</van-tabbar-item>
            <van-tabbar-item icon="bars" name="order">订单</van-tabbar-item>
        </van-tabbar>
    </van-pull-refresh>

</template>

<style scoped>
body {
    background-color: #f7f7f7;
}

.contain {
    margin-top: 20px;
    margin-bottom: 50px;

    .desc {
        margin: 10px;
        display: flex;
        justify-content: space-between;
        align-items: end;

        .left {
            .tip {
                margin: 10px;
            }
        }
    }

}
</style>
